<template>
  <div class="product-attr">
    <el-row :gutter="15" type="flex" align="top">
      <el-col :span="6">
        <el-card>
          <el-scrollbar>
            <el-tree ref="categoryTree" :data="categoryData" accordion highlight-current node-key="value" :props="defaultProps" @current-change="currentChange">
              <span slot-scope="{ node, data }">
                <i :class="data.icon" />
                <span style="padding-left: 4px;">{{ node.label }}</span>
              </span>
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="18">
        <ComplexTable
          ref="attr-table"
          :query-model="queryModel"
          :table-column-is-show="tableColumnIsShow"
          :create-permission="['pms:attr:create']"
          @onAddPage="addPage"
          @onSearch="search"
        >
          <template v-slot:search_from_input>
            <el-form-item label="属性名称" prop="name">
              <el-input
                v-model="queryModel.name"
                placeholder="属性名称"
                clearable
              />
            </el-form-item>
          </template>

          <template v-slot:table_column>
            <el-table-column
              type="selection"
              width="40"
            />

            <el-table-column
              v-if="tableColumnIsShow.icon.isShow"
              prop="icon"
              label="icon"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.icon"
                />
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.name.isShow"
              prop="name"
              label="属性分组名称"
              align="center"
              header-align="center"
            />
            <el-table-column
              v-if="tableColumnIsShow.categoryName.isShow"
              prop="categoryName"
              label="分类名称"
              align="center"
              header-align="center"
            />

            <el-table-column
              v-if="tableColumnIsShow.searchType.isShow"
              prop="searchType"
              label="是否需要检索"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.searchType ?'是':'否' }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.valueSelect.isShow"
              prop="valueSelect"
              label="可选值"
              align="center"
              header-align="center"
            />

            <el-table-column
              v-if="tableColumnIsShow.attrType.isShow"
              prop="attrType"
              label="属性类型"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ getSystemDictionaries("ATTRTYPE",scope.row.attrType) }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.enable.isShow"
              prop="enable"
              label="启用状态"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.enable?'是':'否' }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.showDesc.isShow"
              prop="showDesc"
              label="展示在介绍上"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.showDesc?'是':'否' }}
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="200"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <TableBtn :parameter="scope.row.id" :edit-permission="['pms:attr:update' ]" :del-permission="['pms:attr:delete' ]" @onDel="del" @onEditPage="editPage" />
              </template>
            </el-table-column>
          </template></ComplexTable>
      </el-col>
    </el-row>
    <!--弹出框-->
    <MyEditDialog :dialog-visible="dialogVisible" :title="title" width="880px" @onDialogSave="save" @onGoBack="dialogVisible=false">
      <template v-slot:dialog_content>
        <EditForm v-if="dialogVisible" ref="EditForm" :edit-model="editFormModel" :validate="formValidate" />
      </template>
    </MyEditDialog>
  </div>
</template>
<script>
import ComplexTable from '@/components/ComplexTable'
import { findAllCategoryREQ } from '@/api/product/category'
import { pageAttrREQ, createAttrREQ, getAttrByIdREQ, updateAttrREQ, deleteAttrREQ } from '@/api/product/attr'
import { listToTree } from 'tree-walk-util'
import MyEditDialog from '@/components/MyEditDialog'
import { editValidate, addValidate } from './validate'
import TableBtn from '@/components/TableBtn'
import deepcopy from 'deepcopy'
import EditForm from './EditForm'
import { mapGetters } from 'vuex'
export default {
  name: 'GROUP',
  components: { ComplexTable, MyEditDialog, EditForm, TableBtn },
  data() {
    return {
      categoryData: null,
      defaultProps: {
        children: 'children',
        label: 'text',
        disabled: 'disabled',
        value: 'value'
      },
      tableColumnIsShow: {
        name: { label: '属性名称', isShow: true },
        categoryName: { label: '分类名称', isShow: true },
        attrType: { label: '属性类型', isShow: true },
        enable: { label: '是否启用', isShow: true },
        icon: { label: 'icon', isShow: true },
        searchType: { label: '是否需要检索', isShow: true },
        showDesc: { label: '展示在介绍上', isShow: true },
        valueSelect: { label: '可选值', isShow: true }
      },
      dialogVisible: false,
      title: '',
      editFormModel: {},
      formValidate: {},
      queryModel: {
        name: '',
        categoryId: ''
      },
      defaultEditForm: {
        attrType: 'SALES_ATTR',
        categoryId: '',
        enable: 'true',
        icon: '',
        name: '',
        searchType: 'true',
        showDesc: 'true',
        valueSelect: []
      }

    }
  },
  computed: {
    ...mapGetters({ 'getSystemDictionaries': 'dictionaries/getSystemDictionaries' })
  },
  mounted() {
    this.findAllCategory()
  },
  methods: {
    findAllCategory() {
      findAllCategoryREQ().then(data => {
        if (!data || data.length === 0) return
        const tempData = listToTree(data, 'value', 'parentId', 'children').children
        this.categoryData = tempData
      })
    },
    save() {
      this.$refs['EditForm'].$refs['EditForm'].validate((valid) => {
        if (valid) {
          const tempEdistFormModel = deepcopy(this.editFormModel)
          tempEdistFormModel.valueSelect = tempEdistFormModel['valueSelect'].join(',')
          if (tempEdistFormModel.id) {
            updateAttrREQ(tempEdistFormModel).then(v => {
              this.findAllCategory()
              this.$refs['attr-table'].onSearch()
              this.dialogVisible = false
            })
          } else {
            createAttrREQ(tempEdistFormModel).then(v => {
              this.findAllCategory()
              this.$refs['attr-table'].onSearch()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    del(id) {
      if (id) {
        deleteAttrREQ(id).then(v => {
          this.search({ current: 1 })
        })
      }
    },
    editPage(id) {
      if (id) {
        this.title = '编辑属性信息'
        getAttrByIdREQ(id).then(data => {
          this.editFormModel = deepcopy(data)
          this.editFormModel.valueSelect = data.valueSelect.split(',')
          this.editFormModel.searchType = data.searchType.toString()
          this.editFormModel.showDesc = data.showDesc.toString()
          this.editFormModel.enable = data.enable.toString()
          this.dialogVisible = true
          this.formValidate = editValidate
        })
      }
    },
    addPage() {
      this.title = '新增属性信息'
      this.editFormModel = deepcopy(this.defaultEditForm)
      const _node = this.$refs['categoryTree'].getCurrentNode()
      const { value } = _node || { value: null }
      this.editFormModel.categoryId = value
      this.dialogVisible = true
      this.formValidate = addValidate
    },
    currentChange(row) {
      if (this.queryModel.categoryId === row.value) {
        this.$refs['categoryTree'].setCurrentKey(null)
        this.queryModel.categoryId = ''
      } else {
        this.queryModel.categoryId = row.value
      }
      this.$refs['attr-table'].currentChange(1)
    },
    search(queryModel) {
      pageAttrREQ(queryModel).then((data) => {
        // 双重认证
        if (this.$refs['attr-table']) { this.$refs['attr-table'].setTableAndPage(data) }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
